<template>
  <div class="home-container">
    <!-- 简洁的欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h2>我的文件</h2>
        <div class="quick-actions">
          <el-button type="primary" @click="$router.push('/fileupload')">
            📤 上传文件
          </el-button>
          <el-button type="success" @click="$router.push('/new')">
            📁 新建文件夹
          </el-button>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <Search />
    </div>

    <!-- 文件列表 -->
    <div class="file-list-section">
      <Table />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import Search from "@/components/search.vue";
import Table from "@/components/table.vue";

const router = useRouter();

// 判断登录状态
const token = localStorage.getItem("token");
if (!token) {
  router.push({ path: "/login" });
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.welcome-section {
  margin-bottom: 20px;
  
  .welcome-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ebeef5;
    
    h2 {
      margin: 0;
      color: #303133;
      font-weight: 600;
    }
    
    .quick-actions {
      display: flex;
      gap: 10px;
    }
  }
}

.search-section {
  margin-bottom: 20px;
}

.file-list-section {
  // 文件列表样式由Table组件自己处理
}

@media (max-width: 768px) {
  .home-container {
    padding: 15px;
  }
  
  .welcome-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
    
    .quick-actions {
      justify-content: center;
    }
  }
}
</style>
